<template>
  <div id="app">
    <!-- 顶部基础用户信息栏 -->
    <BaseHeader :key="componentKey"/>
    <!-- 顶部导航栏信息 -->
    <BaseNav />
    <!-- 组件 -->
    <router-view />
    <!-- 底部信息栏 -->
    <BaseFooter />
    <!-- 全局组件:单击水波纹 -->
    <BaseClick />
    <!-- 退出登录按钮 -->
    <BaseExit />
  </div>
</template>

<script>
import BaseHeader from "./components/baseHeader.vue";
import BaseNav from "./components/baseNav.vue";
import BaseFooter from "./components/baseFooter.vue";
import BaseClick from "./components/baseLogin.vue";
import BaseExit from "@/components/baseExit.vue";

export default {
  name : 'App' , 
  data(){
    return {
      componentKey: 0
    }
  },
  watch: {
      "$route.query": {
          handler(newVal, oldVal) {
              let _this = this;
              if (_this.$route.query) {
                  _this.componentKey++;
              }
          },
          deep: true,
      },
    },
  components:{
    BaseHeader,
    BaseNav,
    BaseFooter,
    BaseClick,
    BaseExit
  }
}
</script>

<style lang="less">

</style>
